<template>
  <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
    <el-form-item label="账号" prop="name">
      <el-input v-model="ruleForm.name" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" type="password" prop="pwd">
      <el-input v-model="ruleForm.pwd" autocomplete="off" />
    </el-form-item>
    <el-form-item label="验证码" prop="code">
      <div style="display: flex;">
        <el-input v-model="ruleForm.code" />
        <img @click="resetCode" :src="codeUrl" alt="">
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import axios from 'axios'
import { fa, ru } from 'element-plus/es/locale';


const ruleFormRef = ref<FormInstance>()
const codeUrl = ref<string>("/api/users/code")

const ruleForm = reactive({
  name: '',
  pwd: '',
  code: ""
})

const resetCode = () => {
  codeUrl.value = codeUrl.value + "?" + Math.random()
}
const submitForm = (formEl: FormInstance | undefined) => {
  const { name, pwd, code } = ruleForm
  axios.post("/api/users/create", { name, pwd, code },{withCredentials:false}).then(res => {
    console.log(res);
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
